<script setup>
import { ref, onMounted } from 'vue'
import { getOwnQuestionAPI, delQuestionAPI } from '@/apis/question'
import { ElMessage } from 'element-plus';

const questionList = ref([])

const getOwnQuestion = async () => {
    const res = await getOwnQuestionAPI()
    if (res.code === 2000) {
        questionList.value = res.data
    }
}

const delQuestion = async (id) => {
    const res = await delQuestionAPI(id)
    if (res.code === 2000) {
        getOwnQuestion()
        ElMessage({ type: 'success', message: '删除成功' })
    }
}

// const emptyQA = { question: '', answer: '' }
const qa = ref({ question: '', answer: '' })
const dialogVisible = ref(false)
const status = 1;

const showQuestion = (i) => {
    qa.value.question = i.content
    qa.value.answer = i.answer?.content
    dialogVisible.value = true
}

onMounted(() => getOwnQuestion())
</script>

<template>
<div class="question-page">
    <div class="page-title">我的提问</div>
    <div class="question-list">
        <div class="question-card" v-for="i in questionList" :key="i.id">
            <div class="info">
                <div class="centent">{{ i.content }}</div>
                <div class="other">
                    <div>专家姓名：{{ i.expert }}</div>
                    <div>农作物/畜牧：{{ i.plant }}</div>
                    <div class="status">
                        <div class="s1" v-show="i.status === 0">待回答</div>
                        <div class="s2" v-show="i.status === 1">已回答</div>
                        <!-- <div class="s3" v-show="status === 2">被拒答</div> -->
                    </div>
                </div>
            </div>
            <div class="operation">
                <a href="javascript:;" v-show="i.status === 1" @click="showQuestion(i)">查看回答</a>
                <!-- <a href="javascript:;">编辑</a> -->
                <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delQuestion(i.id)">
                    <template #reference>
                        <a href="javascript:;">删除</a>
                    </template>
                </el-popconfirm>
            </div>
        </div>
    </div>
</div>

<el-dialog
    v-model="dialogVisible"
    title="查看回答"
    width="30%">
    <div class="dialog-content">
        <div>
            <div class="label">问题：</div>
            <div class="show-wrap">{{ qa.question }}</div>
        </div>
        <div>
            <div class="label">回答：</div>
            <div class="show-wrap">{{ qa.answer }}</div>
        </div>
    </div>
</el-dialog>
</template>

<style scoped lang='scss'>
.question-page {
    width: 100%;
    height: 100%;
    padding: 20px 40px;
    background-color: #fff;
}

.page-title {
    font-size: 21px;
    padding: 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.dialog-content {
    width: 100%;

    >div {
        display: flex;
        margin-bottom: 20px;
        font-size: 16px;
        
        .label {
            align-items: center;
            width: 70px;
        }

        .show-wrap {
            width: 300px;
            min-height: 32px;
            padding: 5px 10px;
            border: 1px solid #d8d8d8;

            textarea {
                width: 100%;
                min-height: 200px;
                outline: none;
                border: none;
                resize: none;
                font-size: 16px;
                font-family:  "Arial"
            }
        }
    }
}

.question-card {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;

    .info {
        width: 600px;
    }

    .other {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-top: 15px;
        color: #999;

        >div {
            height: 25px;
            line-height: 25px;
            margin-right: 20px;

            &:last-child {
                margin-right: 0;
            }
        }

        .status {
            >div {
                font-size: 12px;
                padding: 0 8px;
                border-radius: 4px;
            }

            .s1 {
                color: #f56c6c;
                background-color: #fef0f0;
            }

            .s2 {
                color: #39bf3e;
                background-color: #f0f9eb; 
            }

            .s3 {
                color: #909399;
                background-color: #f4f4f5;
            }
        }
    }

    .operation {
        display: flex;
        align-items: center;

        a {
            display: inline-block;
            margin: 0 8px;
            font-size: 14px;
            color: #39bf3e;
        }
    }
}
</style>
